<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>黑马妹妹练习</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/myindex.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <script src="js/flexible.js"></script>
</head>
<body>
  <!-- 标题 -->
  <header class="header">黑马妹妹</header>
  <div class="main">
  <!-- 导航内容部分 -->
  <section class="wrap">
    <!-- 导航栏部分 -->
    <nav class="nav"> 
      <ul>
        <li><a href="#"><img src="icons/icon1.png" alt=""><span>HR面试</span></a></li>
        <li><a href="#"><img src="icons/icon2.png" alt=""><span>笔试</span></a></li>
        <li><a href="#"><img src="icons/icon3.png" alt=""><span>技术面试</span></a></li>
        <li><a href="#"><img src="icons/icon4.png" alt=""><span>模拟面试</span></a></li>
        <li><a href="#"><img src="icons/icon5.png" alt=""><span>面试技巧</span></a></li>
        <li><a href="#"><img src="icons/icon6.png" alt=""><span>薪资查询</span></a></li>
      </ul>
    </nav>
    <!-- 图片导航 -->
    <div class="nav-pic">
      <a href="#"> <img src="images/go.png" alt=""></a>
    </div>
  </section>
<!-- 就业指导模块 -->
<section class="employment">
  <div class="title">
    <div class="text">
      <img src="icons/i2.png" alt="">
      <h5>就业指导</h5>
    </div>
    <div class="more"><a href="#">更多>></a></div>
  </div>
  <div class="lunbotu">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="#">
          <img src="images/pic.png" alt="">
          <p>老师教你应对面试技巧</p>
        </a></div>
        <div class="swiper-slide"><a href="#">
          <img src="images/2.jpg" alt="">
          <p>直面刘德华</p>
        </a></div>
        <div class="swiper-slide"><a href="#">
          <img src="images/3.jpg" alt="">
          <p>帅气刘德华</p>
        </a></div>
      </div>
      <!-- Add Pagination -->
      <!-- <div class="swiper-pagination"></div> -->
     
    </div>
     <!-- Add Arrows -->
     <div class="swiper-button-next my-slide-next"></div>
     <div class="swiper-button-prev my-slide-prev"></div>
  </div>
</section>
<!-- 充电学习模块 -->
<section class="study">
  <div class="title">
    <div class="text">
      <img src="icons/i1.png" alt="">
      <h5>充电学习</h5>
    </div>
    <div class="more"><a href="#">更多>></a></div>
  </div>
  <div class="study-swiper">
    <!-- Swiper -->
  <div class="swiper-container1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="#">
          <img src="images/pic1.png" alt="">
          <h3>说地道英语，告别中式英语</h3>
          <p><span>156</span>人学习</p>
        </a>
      </div>
        
      <div class="swiper-slide">
        <a href="#">
          <img src="images/pic2.png" alt="">
          <h3>思维攻略金字塔思维提升写作能力我安慰安慰大伟啊啊</h3>
          <p><span>156</span>人学习</p>
        </a>
      </div>  
      <div class="swiper-slide">
        <a href="#">
          <img src="images/pic1.png" alt="">
          <h3>说地道英语，告别中式英语</h3>
          <p><span>156</span>人学习</p>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img src="images/pic1.png" alt="">
          <h3>说地道英语，告别中式英语</h3>
          <p><span>156</span>人学习</p>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img src="images/pic1.png" alt="">
          <h3>说地道英语，告别中式英语</h3>
          <p><span>156</span>人学习</p>
        </a>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
  </div>
</section>
<section>
 
  <div>也许这里放的是版权</div>
  <div>也许这里放的是版权</div>
  <div>也许这里放的是版权</div>
  <div>也许这里放的是版权</div>
</section>
</div>
<!-- 底部导航路邮 -->
<footer>
  <ul class="nav">
      <li><a href="#"> 
        <img src="icons/home.png" alt="">
        <span class="font-color">首页</span>
      </a></li>
      <li><a href="#"> 
        <img src="icons/net.png" alt="">
        <span>技术面试</span>
      </a></li>
      <li><a href="#"> 
        <img src="icons/ms.png" alt="">
        <span>模拟面试</span>
      </a></li>
      <li><a href="#"> 
        <img src="icons/user.png" alt="">
        <span>我的</span>
      </a></li>
  </ul>
</footer>
</body>
<script src="js/swiper.min.js"></script>
<script>
  (function () {  
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 2.5,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true,
      // pagination: {
      //   el: '.swiper-pagination',
      //   clickable: true,
      // },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // autoplay:true,
      autoplay: {
        //切换下一个毫秒数
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },
    });
  })();

  (function () {  
    var swiper = new Swiper('.swiper-container1', {
      slidesPerView: 2.5,
      spaceBetween: 20,
      autoplay:true,
    });
  })()
</script>
</html>